<template>
  <el-row :gutter="gutter">
    <el-col :span="myExpand&&!disabled?lspan:0" :class="{border:lborder}" v-if="!disabled">  
      <slot name="left"></slot>
    </el-col>
    <el-col :span="myExpand&&!disabled?(24-lspan):24" :class="{border:rborder}">
      <div style="position: relative;" > 
        <div :style="{position: 'absolute', left:myExpand?'-8px':'8px',top:'16px', transform: 'translateX(-50%)'}" v-if="!disabled">
           <div :class="{button:true,expand: myExpand,unexpand:!myExpand}" @click="toggle()"  :title="myExpand?'已展开左边，点击收起':'已收起左边，点击展开'"></div>
        </div> 

        
        </div>
        <div :style="{paddingLeft:myExpand?'0px':'10px'}">
          <slot>

          </slot> 
        </div>

        <div>

 
    </div>
    </el-col>
  </el-row>
   
</template>

<script>
 
export default {
  name: 'MdpLmrBox',   
  watch:{
    expand(){
       this.myExpand=this.expand
    },
    myExpand(){
      this.$emit('expand',this.myExpand)
    },
    lspan(){
      this.myExpand=this.expand
    }
  },
  props:{
    gutter:{
      type: Number,
      default: 10
    },
    lspan:{
      type: Number,
      default:6
    }, 
    /**
     * 左边是否显示边框
     */
     lborder:{
      type: Boolean,
      default: false,
    },
    /**
     * 右边是否显示边框
     */
     rborder:{
      type: Boolean,
      default: false,
    },
    /**
     * 指左边是否展开
     */
    expand:{
      type: Boolean,
      default: true,
    },
    /**
     * 是否禁止分栏
     */
     disabled:{
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      myExpand:false,

    }
  },
  methods: {
     doExpand(expand){
      this.myExpand=expand
     },
     toggle(){
      this.myExpand=!this.myExpand
     }
  },
  mounted(){
    this.myExpand=this.expand
    this.$emit('expand',this.myExpand)
  }
}

</script>
<style lang="scss"> 

.button {
  width: 20px;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #409eff; 
  cursor: pointer;
} 
.unexpand { 
  transform: rotate(90deg);
} 
.expand { 
  transform: rotate(-90deg);
}
</style>